<template>
	<view class="goods-card">
		<view class="img" @click="previewImg(goods.goods_thumb)">
			<van-image width="180rpx" height="180rpx" lazy-load fit="cover"
				:src="goods.goods_thumb" />
			<van-icon name="expand-o" size="40rpx" color="#f6f6f6" />
			<view class="tags">
				<p v-if="goods.is_not_recommended" class="not_recommended">不建议</p>
				<p v-if="goods.is_hot" class="hot">推荐</p>
				<p v-if="goods.is_new" class="new">新品</p>
				<p v-if="!goods.remain_count" class="stockout">沽清</p>
			</view>
		</view>
		<view class="content">
			<p class="name">{{goods.name}}</p>
			<p class="desc">{{goods.goods_desc}}</p>
			<p v-if="!isShopCart" class="sell"> 已售 {{goods.total_sell_count}}</p>
			<p class="unit" v-if="isSpecification">{{specificationSelected}}</p>
			<view class="price-wrap">
				<span class="symbol">¥</span>
				<span class="price">{{goods.price}}</span>
				<span class="unit">/{{goods.unit}}</span>
				
				<view class="add-wrap" v-if="goods.remain_count">
					<block v-if="goods.num && (isShopCart || !isSpecification)">
						<image 
							@click="$emit('onChangeGoods', -1)" 
							@touchstart="minusIsStart = true"
							@touchend="touchend('minusIsStart')"
							:class="{minus: true, scale: minusIsStart}"
							src="@/static/subtraction.png">
						</image>
						<span>{{goods.num}}</span>
					</block>
					<image 
						v-if="isShopCart || !isSpecification"
						@click="$emit('onChangeGoods', 1)" 
						@touchstart="addIsStart = true"
						@touchend="touchend('addIsStart')"
						:class="{add: true, scale: addIsStart}"
						src="@/static/add.png" 
						mode="heightFix">
					</image>
					<van-icon v-else @click="$emit('showSpecification', goods)" name="cart-circle" size="50rpx" color="#004EA2"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapMutations } from "vuex"
	export default {
		name: 'goods-card',
		data() {
			return {
				addIsStart: false,
				minusIsStart: false,
			}
		},
		props: ['goods', 'isShopCart'],
		computed: {
			isSpecification() {
				return this.goods.specification?.length
			},
			specificationSelected() {
				return this.goods.specificationSelected?.join(',')
			}
		},
		methods: {
			touchend(key) {
				setTimeout(() => this[key] = false, 200)
			},
			previewImg(url) {
				uni.previewImage({
					current: 0,
					urls: [url]
				})
			},
		}
	}
</script>

<style lang="scss">
	.goods-card {
		display: flex;
		min-height: 180rpx;
		margin: 30rpx 0;
		
		.img {
			width: 180rpx;
			height: 180rpx;
			position: relative;
			background: #f7f8fa;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			overflow: hidden;
			image {
				border-radius: 10rpx;
			}
			>van-icon {
				position: absolute;
				left: -1px;
				bottom: 0;
			}
			.tags {
				position: absolute;
				right: 0;
				top: 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: transparent;
				p {
					font-size: 20rpx;
					border-radius: 4rpx;
					padding: 1px 6rpx;
					color: white;
				}
				.not_recommended {
					background-color: #E6A23C;
				}
				.hot {
					background-color: rgb(245,63,63);
				}
				.new {
					background-color: #67C23A;
				}
				.stockout {
					background-color: #ffb954;
				}
			}
		}
		
		.content {
			flex: 1;
			padding: 0 20rpx;
			min-height: 180rpx;
			display: flex;
			flex-direction: column;
			.name {
				color: black;
				font-size: 32rpx;
				font-weight: bold;
			}
			.sell {
				// margin-top: auto;
			}
			.desc {
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				margin-bottom: auto;
			}
	
			.price-wrap {
				line-height: 1;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				
				.symbol {
					font-size: 20rpx;
					font-weight: bold;
					margin: 4rpx 2rpx 0 0;
					color: #eb5232;
				}
				
				.price {
					font-weight: bold;
					color: #eb5232;
				}
				
				.add-wrap {
					height: 40rpx;
					margin-left: auto;
					display: flex;
					justify-content: center;
					align-items: center;
					
					.minus, .add {
						transition: all .2s ease;
						transform: scale(1);
					}
					.scale {
						transform: scale(0.8);
					}
					.minus {
						width: 48rpx;						height: 48rpx;
					}
					span {
						font-size: 30rpx;
						color: #000000;
						margin: 0rpx 28rpx 0 25rpx;
					}
					.add {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			
			.sell, .unit, .desc {
				font-size: 24rpx;
				color: #c1c1c1;
				font-weight: 0 !important;
			}
			
		}
	}
</style>